<template>
  <h1>{{ user.name }}</h1>
  <h1>{{ user.age }}</h1>
  <h1>{{ user.gender }}</h1>
  <button @click="update()"></button>
  <button @click="Test()">点击</button>
</template>

<script lang="ts">
//defineComponent  目的是定义组件  内部可以传入配置对象  name表示当前组件的名称 components 注册组件
interface User {
  name: string;
  age: number;
  gender?: string;
}
import Vue, { defineComponent, reactive, ref } from "vue";
export default defineComponent({
  name: "App",
  components: {},
  beforeCreate() {
    console.log("beforeCreate");
  },
  mounted() {
    console.log("mounted");
  },
  // setup(){
  //   console.log("setup回调");
  //ref函数定义响应式的数据  操作数据的时候需要使用value 在模板内不能使用value
  //   let count:Vue.Ref<number> = ref(0);
  //   console.log(count);//RefImpl {_rawValue: 0, _shallow: false, __v_isRef: true, _value: 0}
  //   function update(){
  //       count.value++;
  //   }
  //   return {
  //     number:10,//这里返回的这个对象会直接绑定到这个组件的this,
  //     count:count,
  //     update
  //   }
  // }
  setup() {
    const obj: User = {
      name: "建哥哥",
      age: 18,
    }; //目标对象
    // !reactive 接受一个普通对象然后返回这个普通对象的响应式代理对象
    const user = reactive(obj); //代理对象
    function update() {
      user.name = "帅建";
      user.gender = "男"; //也会添加到目标对象
    }

    return {
      user,
      update,
    };
  },
  methods:{
    Test(){
      ProxyUser.name = "jiange",
      ProxyUser.gender = "男"
    }
  }
});
const Jian:User = {
  name: "建哥",
  age: 18,
};
//Jian就是目标对象 参数er为处理器对象用来监视数据，及数据的操作
const ProxyUser = new Proxy(Jian, {
  get(target, property) {
    console.log(target, property);
    return Reflect.get(target, property);
  },
  set(target,p, v) {
    console.log("set调用了");
    
    console.log(p, v);
    return Reflect.set(target,p,v);
  },
  deleteProperty(target,property) {
    console.log(target,property);
    return Reflect.deleteProperty(target,property);
  },
  defineProperty(target,property,v){
    console.log(target,property,v);
    return Reflect.defineProperty(target,property,v);
  }
});
console.log(ProxyUser.name);
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
